<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>失落大陆 - 奇幻王国发展模拟器</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/map.css">
    <link rel="stylesheet" href="css/ui.css">
</head>
<body>
    <div id="game-container">
        <!-- 左侧地图区域 -->
        <div id="map-container">
            <canvas id="world-map" width="1000" height="800"></canvas>
            <div id="map-controls">
                <button id="zoom-in">+</button>
                <button id="zoom-out">-</button>
                <button id="reset-view">重置视图</button>
            </div>
        </div>

        <!-- 右侧控制面板 -->
        <div id="control-panel">
            <!-- 游戏信息 -->
            <div id="game-info">
                <h2>失落大陆 <span id="plane-boss-title"></span></h2>
            
                <div id="time-info">
                    <span>当前年份: <span id="current-year">0</span>年</span>
                    <span>距离魔王袭击: <span id="boss-countdown">100</span>年</span>
                </div>
                <div id="time-controls">
                    <button id="pause-btn" class="active">暂停</button>
                    <button id="speed-1">1年/秒</button>
                    <button id="speed-10">10年/秒</button>
                    <button id="speed-100">100年/秒</button>
                </div>
            </div>

            <!-- 资源概览 -->
            <div id="resources-overview">
                <h3>世界概览</h3>
                <div class="resource-item">
                    <span>总人口:</span>
                    <span id="total-population">0</span>
                </div>
                <div class="resource-item">
                    <span>总资源:</span>
                    <span id="total-resources">0</span>
                </div>
                <div class="resource-item">
                    <span>总军事力量:</span>
                    <span id="total-military">0</span>
                </div>
                <div class="resource-item">
                    <span>强者数量:</span>
                    <span id="total-heroes">0</span>
                </div>
            </div>

            <!-- 事件日志 -->
            <div id="event-log">
                <h3>事件日志</h3>
                <div id="log-entries"></div>
            </div>

            <!-- 操作按钮 -->
            <div id="action-buttons">
                <button id="strongest-btn">查看强者榜</button>
                <button id="save-btn">保存游戏</button>
                <button id="load-btn">加载游戏</button>
            </div>
        </div>
    </div>

    <!-- 弹出层 -->
    <div id="modal-container" class="hidden">
        <div id="modal-content">
            <span id="modal-close">&times;</span>
            <div id="modal-body"></div>
        </div>
    </div>

    <!-- 王国详情弹窗 -->
    <div id="kingdom-detail" class="detail-panel hidden">
        <h3 id="kingdom-name"></h3>
        <div class="kingdom-info">
            <div class="info-row">
                <span>种族:</span>
                <span id="kingdom-race"></span>
            </div>
            <div class="info-row">
                <span>成立年份:</span>
                <span id="kingdom-founded"></span>
            </div>
            <div class="info-row">
                <span>人口:</span>
                <span id="kingdom-population"></span>
            </div>
            <div class="info-row">
                <span>资源值:</span>
                <span id="kingdom-resources"></span>
            </div>
            <div class="info-row">
                <span>军事值:</span>
                <span id="kingdom-military"></span>
            </div>
            <div class="info-row">
                <span>状态:</span>
                <span id="kingdom-status"></span>
            </div>
        </div>
        <div class="kingdom-actions">
            <button id="develop-economy">发展经济</button>
            <button id="expand-military">扩充军备</button>
            <button id="explore-resources">探索资源</button>
        </div>
    </div>

    <!-- 强者榜弹窗 -->
    <div id="strongest-panel" class="detail-panel hidden">
        <span id="strongest-close" class="panel-close">&times;</span>
        <div class="tab-container">
            <div class="tab active" data-tab="current">当前强者</div>
            <div class="tab" data-tab="history">历史强者</div>
        </div>
        <div id="strongest-list" class="tab-content active"></div>
        <div id="history-list" class="tab-content"></div>
    </div>

    <!-- 魔王挑战弹窗 -->
    <div id="boss-challenge" class="detail-panel hidden">
        <span id="boss-close" class="panel-close">&times;</span>
        <h3>魔王降临</h3>
        <div class="boss-avatar">
            <img id="boss-image" src="" alt="魔王头像">
        </div>
        <div class="boss-info">
            <div class="info-row">
                <span>魔王名称:</span>
                <span id="boss-name"></span>
            </div>
            <div class="info-row">
                <span>能力值:</span>
                <span id="boss-ability"></span>
            </div>
            <div class="info-row">
                <span>弱点:</span>
                <span id="boss-weakness"></span>
            </div>
        </div>
        <div class="battle-comparison">
            <h4>战力对比</h4>
            <div class="progress-container">
                <div class="progress-label">玩家总战力: <span id="player-power">0</span></div>
                <div class="progress-bar">
                    <div id="player-power-bar"></div>
                </div>
            </div>
            <div class="progress-container">
                <div class="progress-label">魔王能力值: <span id="boss-power">0</span></div>
                <div class="progress-bar">
                    <div id="boss-power-bar"></div>
                </div>
            </div>
        </div>
        <button id="start-challenge">开始挑战</button>
    </div>

    <!-- 游戏脚本 -->
    <script src="js/config.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/data.js"></script>
    <script src="js/map.js"></script>
    <script src="js/kingdom.js"></script>
    <script src="js/npc.js"></script>
    <script src="js/events.js"></script>
    <script src="js/ui.js"></script>
    <script src="js/game.js"></script>
</body>
</html>